<template>
  <view class="u-page">
    <view v-for="(list,index) in dataList" :key="index">
      <up-grid class="grid" :border="false" col="4" gap="20px">
        <up-grid-item v-for="(listItem,listIndex) in list" :key="listIndex">
          <view class="iconBody">
            <up-icon
              :custom-style="{paddingTop:20+'rpx'}"
              :name="listItem.name"
              :size="40"
              color="#4D4D4D"
              :label="listItem.title"
              label-pos="bottom"
              label-size="10px"
              labe-color="#666666"
              space="3px"
            >
            </up-icon>
          </view>

        </up-grid-item>
      </up-grid>
    </view>


  </view>
</template>

<script setup lang="ts">

const dataList = reactive(
  [
    [
      {
        name: 'photo',
        title: '图片'
      },
      {
        name: 'lock',
        title: '锁头'
      },
      {
        name: 'star',
        title: '星星'
      },
      {
        name: 'hourglass',
        title: '沙漏'
      }
    ],
    [
      {
        name: 'photo',
        title: '图片'
      },
      {
        name: 'lock',
        title: '锁头'
      },
      {
        name: 'star',
        title: '星星'
      },
      {
        name: 'hourglass',
        title: '沙漏'
      }
    ]
  ]
);
</script>


<style scoped lang="scss">
.u-page {
  .grid {
    margin-top: 8vh;
  }
}

.iconBody {
  width: 80px;
  height: 80px;
  text-align: center;
  background-color: #ffffff;
  border-radius: 10px;
}

</style>
